<template>
  <view class="commentBox">
    <view class="commentTop">
      <view class="commentLabel">
        评价
      </view>
      <view class="commentTotal">
        （{{ comment.count || 0 }}条）
      </view>
      <view class="commentAll" @click="navigateToEvaluate">
        全部 >
      </view>
    </view>
    <view class="commentItem" v-if="comment.data && comment.data.length > 0">
      <view class="userInfoBox">
        <image :src="comment.data[0].head" class="avatar"></image>
        <text class="name ellipsis">{{ comment.data[0].name }}</text>
        <uni-rate disabled="true" :value="comment.data[0].score" size="18" color="#C4C4C4" activeColor="#000000"
          class="rate" />
      </view>
      <text class="commentInfo">{{ comment.data[0].content }}</text>
      <view class="commentImgBox">
        <image :src="item.url" v-for="(item, index) in comment.data[0].thumb" :key="index" class="commentImgItem"></image>
      </view>
    </view>
    <view v-else style="text-align: center;margin-top: 20rpx;" >
      暂无评价
    </view>
  </view>
</template>

<script>
export default {
  props: {
    comment: {
      type: Object,
      default: () => ({
        count: 0,
        data: [], // 默认值为空数组
      }),
    },
    serviceId: {
      type: String,
      required: true,
    },
  },
  methods: {
    navigateToEvaluate() {
      this.$navto.navto('/pages/service_evaluate/service_evaluate', { id: this.serviceId });
    },
  },
};
</script>

<style lang="scss" scoped>
.commentBox {
  width: 670rpx;
  margin-left: 40rpx;
  padding-top: 50rpx;
  padding-bottom: 50rpx;

  .commentItem {
    display: flex;
    flex-direction: column;
    margin-top: 65rpx;
    padding-bottom: 75rpx;
    border-bottom: 1rpx solid #121212;

    .commentImgBox {
      width: 590rpx;
      margin-left: 80rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 40rpx;

      .commentImgItem {
        width: 138rpx;
        height: 138rpx;
        margin-bottom: 10rpx;
        border-radius: 10rpx;
      }
    }

    .commentInfo {
      font-weight: 500;
      width: 590rpx;
      line-height: 48rpx;
      font-size: 24rpx;
      color: #121212;
      letter-spacing: 2rpx;
      margin-left: 80rpx;
    }

    .userInfoBox {
      display: flex;
      align-items: center;

      .rate {
        margin-left: auto;
      }

      .name {
        font-weight: 700;
        width: 400rpx;
        font-size: 24rpx;
        color: #121212;
        margin-left: 35rpx;
      }

      .avatar {
        width: 43rpx;
        height: 43rpx;
      }
    }
  }

  .commentTop {
    display: flex;
    align-items: center;
    padding-bottom: 45rpx;
    border-bottom: 1rpx solid #121212;

    .commentAll {
      font-weight: 500;
      font-size: 24rpx;
      color: #8E8E8E;
      margin-left: auto;
    }

    .commentTotal {
      font-weight: 500;
      font-size: 24rpx;
      color: #121212;
    }

    .commentLabel {
      font-weight: 700;
      font-size: 26rpx;
      color: #121212;
    }
  }
}
</style>